前言

這個章節將會介紹到，在 ES6 新增的箭頭函式使用方法，因為在撰寫 React 程式時，已經都是使用 ES6 的模式再撰寫，所以，對於如何了解箭頭函式使用方法的是很重要的，接著就讓我們介紹它的特性及使用方法。

箭頭函式 (Arrow Function)

一句話簡單清楚的說，箭頭函式 (Arrow Function) 它是一種函式精簡的寫法。箭頭函式的基本語法如下：

(參數,...) => {
  程式敘述;
  return value
}

箭頭函式中不會寫到 function 這個關鍵字，反而使用的是精簡清楚的 => (箭頭) 來連接與函式本體。
透過範例一箭頭函式的基本語法說明，這樣的寫法已經十分精簡了，但依據在實際以下的實際撰寫程式時的不同狀況，我們還可以再簡化。請看以下範例說明。

const mathDouble = function(a) { // 函式表達式
  return a * 2;
}
console.log(mathDouble (10)) // 呼叫函式

如果改用箭頭函式就可以直接以箭頭來替代 function 這個關鍵字，如下所示。

const mathDouble = (a) => { // 箭頭函式表達式寫法
  return a * 2;
}
console.log(mathDouble (10)) // 呼叫函式

箭頭函式 (Arrow Function) 簡寫的規則

此外，如果該函式只有單一行敘述時，我們可以再將該函式省略大括號 {} 與 return 指令，如下所示。

const mathDouble = (a) => a * 2;

最後，箭頭函式如果只有一個參數，可以不用加括號以及沒有參數的時候，哪就必須要保留加上括號，如下所示。

const vipName = (acer) => console.log('Welcome' + acer);

const vipName = acer => console.log('Welcome' + acer); // 只有一個參數，可以不用加上括號

const vipName = () => console.log('Welcome'); // 沒有參數，括號必須保留

結論

除了上面所提到的語法結構差異之外，箭頭函式並沒有固定 this 的功能，這點會在日後提到在 React 的 Component 章節講到。